<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <style>
    body {
      margin: 0 auto;
      padding: 0;
      overflow-y: hidden;
      overflow-x: hidden;
    }
    canvas {
      overflow-y: hidden;
      overflow-x: hidden;
      z-index: -1;
    }
  </style>
</head>
<body>

<canvas id="canvas">不支持canvas</canvas>
<div id="coordiv" style="position: fixed;left: 0;top: 0; width:100%;height:100%;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates" style="position: fixed;right: 100px;top: 0;"></div>
<script>
  let canvas = document.getElementById('canvas');
  var cw = window.innerWidth;
  var ch = window.innerHeight;
  canvas.width = cw;
  canvas.height = ch;
  if (canvas.getContext) {
    let context = canvas.getContext('2d');
    context.fillStyle = '#0000ff';    // 填充
    context.strokeStyle = 'red';      // 描边
    // fillRect在画布上绘制的矩形会填充颜色
    context.fillRect(10, 20, 50, 100);   // 从(10,20)开始绘制矩形,宽为50,高为100
    context.fillStyle = '#7b808b'
    context.fillRect(60, 120, 50, 50);
    // strokeRect在画布上绘制的矩形,会进行描边
    context.strokeRect(400, 50, 100, 100);
    context.strokeStyle = 'rgba(0, 0, 255, 0.3)';
    // lineWidth可以指定边框的宽度,可以是任意整数.(如果是个长度都为100的正方形,线条宽度设置为50,那么,该正方形实际所占空间为150*150,内容宽高为50*50,边框为50)
    context.lineWidth = 10;
    // lineCap可以设置线条末端形状,butt平头,round圆头,square方头
    context.lineCap = 'square';
    // lineJoin可以控制线条末端的形状是圆交(round)还是斜交(bevel),还是斜接(miter)
    context.lineJoin = 'bevel';
    context.strokeRect(550, 50, 100, 100);
    // clearRect可以在指定坐标清除指定宽高内容
  //  context.clearRect(50, 50, 200, 200);

    // 绘制路径,必须要先调用beginPath()方法
    context.beginPath();
    // arc(x, y, radius, startAngle, endAngle, counterclockwise)以x,y为圆心,绘制半径为radius的弧线,startAngle开始角度,endAngle结束角度,最后个参数表示是否按逆时针计算,如果为false(顺时针),如果为true(逆时针)
    context.arc(200, 200, 100, 0, 1, false);
    // arcTo(x1, y1, x2, y2, radius)从上一点开始绘制一条弧线,到x2,y2为止.并且以指定半径radius穿过(x1,y1)
    /*
     * arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。
     */
    context.arcTo(600, 100, 600, 300, 80);
    // bezierCurveTo(c1x, c1y, c2x, c2y, x, y)从上一点开始绘制一条曲线,到(x, y)为止,并且以(c1x, c1y)和(c2x, c2y)为控制点
    context.bezierCurveTo(450, 350, 500, 400, 600, 600);
    // lineTo(x, y)从上一点开始绘制一条直线,到(x, y)为止
    context.lineTo(800, 800);
    // moveTo(x, y)将绘图游标移动到(x, y),不画线
    context.moveTo(500, 500);
    // quadraticCurveTo(cx, cy, x, y),从上一点开始绘制一条二次曲线,到(x, y)为止,并且以(cx, cy)作为控制点
    context.quadraticCurveTo(600, 550, 700, 500);
    // rect(x, y, width, height)从点(x, y)开始绘制一个矩形"路径",宽高分别由width,height控制
    context.rect(200, 100, 100, 100);
    // 绘制完路径后,如果想回到一条连接到起点的线条,可以调用closePath().如果路径已完成,可以调用fill()方法填充颜色,可以调用stroke()方法描边.还可以调用clip()方法,这方法会在路径上剪切区域
    // 最后要调用stroke方法,这样才会显示出来
    context.stroke();
    // 这个方法接受x和y坐标作为参数,用于在路径关闭前,判断画布上的某一点是否在路径上.
    //context.isPointInPath();
    context.font = '100px Arial';
    context.fillText('呵呵呵', 300, 250);
    context.strokeText('呵呵呵', 500, 250);
  }



  function cnvs_getCoordinates(e)
  {
    x=e.clientX;
    y=e.clientY;
    document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
  }
</script>
</body>
</html>


